<template>
  <div class="walletHeaderCont">
    <div class="headerCont_cryptoTotal">
      <h2 class="mb-2 text-sm">{{ $t("币种资产") }}</h2>
      <div class="text-2xl font-extrabold">
        {{ walletData.assets_unit }} {{ walletData.total }}
      </div>
    </div>
    <div class="headerCont_btnCont">
      <el-button
        v-btn="['all', 'web_crypto_send']"
        icon="Promotion"
        size="large"
        type="primary"
        @click="showSendDrawer"
      >
        {{ $t("发送") }}
      </el-button>
      <el-button
        v-btn="['all', 'web_crypto_receive']"
        icon="MessageBox"
        size="large"
        type="primary"
        @click="isShowReceiveDrawer = true"
      >
        {{ $t("接收") }}
      </el-button>
    </div>
  </div>
  <el-divider />
  <el-table :data="walletData.list" style="width: 100%" v-loading="loading">
    <el-table-column align="center" :label="$t('币种')">
      <template #default="scope">
        <div
          style="display: flex; justify-content: center; align-items: center"
        >
          <img :src="scope.row.icon" style="width: 1.5rem; height: 1.5rem" />
          <span style="margin-left: 10px">{{ scope.row.coin_name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column align="center" :label="$t('总数量')">
      <template #default="scope">
        <p>{{ scope.row.balance }}</p>
        <p>≈ {{ scope.row.assets_unit }}{{ scope.row.assets }}</p>
      </template>
    </el-table-column>
    <el-table-column align="center" :label="$t('可用')">
      <template #default="scope">
        <p>{{ scope.row.available }}</p>
        <p>≈ {{ scope.row.assets_unit }}{{ scope.row.available_assets }}</p>
      </template>
    </el-table-column>
    <el-table-column align="center" :label="$t('冻结')">
      <template #default="scope">
        <p>{{ scope.row.freeze }}</p>
        <p>≈ {{ scope.row.assets_unit }}{{ scope.row.freeze_assets }}</p>
      </template>
    </el-table-column>
    <el-table-column align="center" :label="$t('操作')">
      <template #default="scope">
        <el-button
          round
          icon="MoreFilled"
          class="cursor-pointer"
          @click="jumpToDetail(scope.row.coin_name)"
          >{{ $t("查看") }}</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <walletSendDrawer
    :show="isShowSendDrawer"
    @close="
      (bill_no) => {
        isShowSendDrawer = false;
        if (bill_no) {
          currentBillNo = bill_no;
        }
      }
    "
  />
  <walletReceiveDrawer
    :show="isShowReceiveDrawer"
    @close="isShowReceiveDrawer = false"
  />
  <walletDetailDrawer
    v-if="currentBillNo"
    :show="isShowOrderDetail"
    :bill_no="currentBillNo"
    from="send"
    @close="
      () => {
        currentBillNo = '';
        isShowOrderDetail = false;
      }
    "
  />
</template>
<script setup>
// 引入组件
import walletSendDrawer from "./components/walletSendDrawer.vue";
import walletReceiveDrawer from "./components/walletReceiveDrawer.vue";
import walletDetailDrawer from "./components/walletDetailDrawer.vue";

import { ref, reactive, watch, computed } from "vue";
import { useUserStore } from "@/store/modules/user";
import { getWalletHomeNewApi } from "@/api/wallet/index";
import { numberToCurrencyNo } from "@/utils/utils";
import { ElMessage } from "element-plus";
import router from "../../router";
const useUser = useUserStore();

const loading = ref(true);

let walletData = reactive({
  total: 0,
  list: [],
  assets_unit: "$",
});

//是否可以发送
const isItPossibleToSend = computed(() => {
  return walletData.total !== "0";
});
// 获取币种列表
const getWalletHomeData = async () => {
  try {
    loading.value = true;
    const { total_assets, assets_unit, coins_list } =
      await getWalletHomeNewApi();
    walletData.total = numberToCurrencyNo(Number(total_assets));
    walletData.list = coins_list;
    walletData.assets_unit = assets_unit;
    //储存币种列表
    useUser.setCoinListInfo(coins_list);
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
getWalletHomeData();

// 控制发送弹窗显示
const isShowSendDrawer = ref(false);
// 控制接收弹窗显示
const isShowReceiveDrawer = ref(false);
// 控制发送成功弹窗显示
const isShowOrderDetail = ref(false);
const currentBillNo = ref("");
watch(
  () => currentBillNo.value,
  (newVal) => {
    console.log(newVal);
    if (newVal) {
      isShowOrderDetail.value = true;
    } else {
      isShowOrderDetail.value = false;
    }
  }
);
const showSendDrawer = () => {
  if (isItPossibleToSend.value) {
    isShowSendDrawer.value = true;
  } else {
    ElMessage({
      showClose: true,
      message: t("余额不足"),
      type: "error",
      grouping: true,
    });
  }
};

const isShowBuyCoinDrawer = ref(false);
const buyCoins = () => {};

// 跳转到单个币种详情页
const jumpToDetail = (coin_name) => {
  router.replace({ name: "wallet_detail", params: { coin_name } });
};
</script>
<style lang="scss">
.walletHeaderCont {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
